<template>
  <el-submenu
    v-if="!node.meta.hidden && node.children"
    :key="node.path"
    popper-class="sidebar__popper"
    :index="node.path"
    :disabled="node.meta.disabled"
  >
    <template slot="title">
      <Icon class="sidebar-menu-item__icon" :icon-name="node.meta.icon" />
      <span class="sidebar-menu-item__menu-title">{{ node.meta.title }}</span>
    </template>
    <template v-for="child of node.children">
      <SidebarMenuItem
        v-if="!child.meta.hidden"
        :key="child.path"
        :node="child"
      >
        {{ child.meta.title }}
      </SidebarMenuItem>
      <SidebarMenuItem
        v-for="child2 of child.children"
        v-else-if="child.meta.hidden && child.children"
        :key="child2.path"
        :node="child2"
      >
        {{ child2.meta.title }}
      </SidebarMenuItem>
    </template>
  </el-submenu>
  <el-menu-item
    v-else-if="
      !node.meta.hidden &&
      (!node.meta.roles ||
        (node.meta.roles && node.meta.roles.includes($store.state.user.role)))
    "
    :key="node.path"
    :index="node.meta.url || node.path"
    :disabled="node.meta.disabled"
  >
    <Icon class="sidebar-menu-item__icon" :icon-name="node.meta.icon" />
    <span slot="title" class="sidebar-menu-item__menu-title">{{
      node.meta.title
    }}</span>
  </el-menu-item>
</template>
<script>
export default {
  name: 'SidebarMenuItem',
  props: {
    node: {
      type: Object,
      default() {
        return {}
      },
      require: true
    }
  }
}
</script>

<style>
.sidebar-menu-item__icon {
  font-size: 18px;
}
</style>
